<template>
  <el-dialog
    class="doorDialog"
    :model-value="dialogVisible"
    :z-index="1000"
    width="80%"
    title="请选择门禁点"
    :before-close="handleClose"
    draggable
  >
    <div class="content-box">
      <div class="content">
        <div class="main">
          <div class="table-box" v-loading="loading">
            <ProTable
              ref="proTable"
              title="门禁列表"
              rowKey="doorid"
              :columns="columns"
              :request-api="getTableList"
              :data-callback="dataCallback"
              :tool-button="false"
            >
              <!-- Expand -->
              <template #expand="scope">
                {{ scope.row }}
              </template>
            </ProTable>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="DoorDialog">
/* eslint-disable */
// @ts-nocheck
import { ref, watch, h } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getMapTree } from "@/api/modules/common";
import { getDoorList } from "@/api/modules/accessControl/manage/electronMap";
import { ElMessage } from "element-plus";
const loading = ref(false);
const proTable = ref();

const columns = ref([]);

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records || [],
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getDoorList({
    ...newParams,
    mapIds: props.mapIds,
    doorType: 1,
    enableMode: 2,
    checkArea: true,
    notExistInMap: true
  });
};

const props = defineProps<{
  dialogVisible: boolean;
  handleClose: () => void;
  submitCallback: (roomIds: string[]) => Promise<void>;
  mapIds: string[];
  areaSelList: { [key: string]: any }[];
}>();

/**
 * 提交信息
 */
const handleSubmit = async () => {
  const selectedListIds = proTable.value.element.getSelectionRows().map(item => item.doorsn);
  if (!selectedListIds.length) {
    ElMessage.error("请选择要增加的门禁");
    return false;
  }
  props.submitCallback(selectedListIds);
};

watch(
  () => props.dialogVisible,
  nV => {
    if (nV) {
      columns.value = [
        { type: "selection", fixed: "left", width: 60 },
        {
          prop: "areaId",
          label: "区域",
          minWidth: 200,
          enum: props.areaSelList,
          search: { el: "select", defaultValue: "" },
          render: scope => {
            const areaname = props.areaSelList.find(item => item.value === scope.row.areaid).label;
            return areaname;
          }
        },
        {
          prop: "clause",
          label: "描述",
          isShow: false,
          search: { el: "input" }
        },
        {
          prop: "doorsn",
          label: "门禁点编码",
          minWidth: 200
        },
        {
          prop: "doorname",
          label: "描述",
          minWidth: 200
        }
      ];
    }
  }
);
</script>
<style lang="scss" scoped>
@import "@/styles/custom.scss";
.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80vh;
}
.group {
  width: 320px;
  height: 100%;
  padding: 0 15px;
  margin-right: 10px;
  background: #ffffff;
  border-radius: 5px;
  .tree {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    overflow-y: auto;
  }
}
.main {
  display: flex;
  flex: 1;
  flex-flow: column;
  width: 0;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
  .table-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
